<template>
  <view class="page">
    <!-- 导航栏 -->
    <navigation :showIcon="false" title="用户登录"></navigation>
    <view class="welcome">
      欢迎回来
    </view>
    <view v-if="isShow">
      <view class="phone">
        <image src="@/static/loginIcon/zhanghao@2x.png" mode=""></image>
        <input type="text" :adjust-position="false" v-model="phone" placeholder="请输入手机号" placeholder-class="placeholder"
          placeholder-style="color:#999999" />
      </view>
      <view class="phone">
        <image src="@/static/loginIcon/shurumima@2x.png" mode=""></image>
        <input type="text" :adjust-position="false" v-model="code" placeholder="请输入验证码" placeholder-class="placeholder"
          placeholder-style="color:#999999" />
        <button class="code-btn" @click="sendCode" :disabled="codeLoading" type="default">{{codeMsg}}</button>
      </view>
      <button class="btnlogin" @click="nextStep">下一步</button>
    </view>
    <view v-else>
      <view class="phone">
        <image src="@/static/loginIcon/zhanghao@2x.png" mode=""></image>
        <input type="text" :adjust-position="false" v-model="nickname" placeholder="请输入用户名"
          placeholder-class="placeholder" placeholder-style="color:#999999" />
      </view>
      <view class="phone">
        <image src="@/static/loginIcon/shurumima@2x.png" mode=""></image>
        <input type="text" password :adjust-position="false" v-model="password" placeholder="请输入密码"
          placeholder-class="placeholder" placeholder-style="color:#999999" />
      </view>
      <view class="footer-btn">
        <button class="back-step" @click="backStep" type="default">上一步</button>
        <button @click="gotoHome">登录</button>
      </view>
    </view>

    <view class="register">
      <view @click="gotoRegister">还没有账号？先去注册</view>
      <view class="tr" @click="forgetPwd">忘记密码</view>
    </view>
  </view>
</template>

<script>
import navigation from '@/component/navigation.vue';
import sun from '@/utils/sun.js'
const app = getApp().globalData;
export default {
  components: {
    navigation
  },
  data() {
    return {
      nickname: '',
      phone: '',
      code: '',
      password: '',
      isColor: true,

      codeMsg: '获取验证码',
      codeLoading: false,
      timeCount: 60,
      isShow: true,
      timer: null
    };
  },
  onLoad() {
    if (uni.getStorageSync('user')) {
      uni.switchTab({
        url: "../index/index"
      })
    }
    this.nickname = ''
    this.phone = ''
    this.code = ''
    this.password = ''
    this.codeMsg = '获取验证码'
    this.getCode = ''
    this.isShow = true
  },
  onShow(){
    this.nickname = ''
    this.phone = ''
    this.code = ''
    this.password = ''
    this.codeMsg = '获取验证码'
    this.getCode = ''
    this.isShow = true
  },
  methods: {
    // 获取验证码
    sendCode() {
      let that = this
      let checkMobile = /^1[3-9][0-9]\d{8}$/;
      if (that.phone == '') {
        uni.showToast({
          icon: 'none',
          title: '手机号不能为空'
        })
      } else if (!checkMobile.test(that.phone)) {
        uni.showToast({
          icon: 'none',
          title: '手机号格式不正确'
        })
      } else {
        that.codeMsg = that.timeCount + 's后重新发送';
        that.codeLoading = true;
        that.timer = setInterval(() => {
          that.timeCount--;
          that.codeMsg = that.timeCount + 's后重新发送';
          if (that.timeCount == 0) {
            that.codeLoading = false;
            clearInterval(that.timer);
            that.timer = null;
            that.codeMsg = '重新发送';
            that.timeCount = 60;
          }
        }, 1000);
        sun.request({
          url: "/api/ucenter.passport/loginCode",
          showLoading: true,
          token: false,
          data: {
            mobile: that.phone,
          },
          success(res) {
            if (res.code == 200) {
              uni.showToast({
                icon: "none",
                title: "验证码发送成功，请注意查看短信",
              })
            } else {
              uni.showToast({
                icon: "none",
                title: res.msg
              })
              that.codeLoading = false;
              clearInterval(that.timer);
              that.timer = null;
              that.codeMsg = '重新发送';
              that.timeCount = 60;
              return false;
            }
          },
          fail(code, msg) {
            uni.showToast({
              icon: "none",
              title: code + "数据获取失败~",
            })
          }
        })
      }
    },
    // 下一步
    nextStep() {
      let that = this
      let checkMobile = /^1[3-9][0-9]\d{8}$/;
      if (that.phone == '') {
        uni.showToast({
          icon: 'none',
          title: '手机号不能为空'
        })
        return false
      }
      if (!checkMobile.test(that.phone)) {
        uni.showToast({
          icon: 'none',
          title: '手机号格式不正确'
        })
        return false
      }
      sun.request({
        url: "/api/ucenter.passport/checkCode",
        showLoading: true,
        token: false,
        data: {
          mobile: that.phone,
          code: that.code,
        },
        success(res) {
          if (res.code == 200) {
            uni.showToast({
              icon: "none",
              title: res.msg,
            })
            that.isShow = false;
          } else {
             that.isShow = true
            uni.showToast({
              icon:"none",
              title:res.msg
            })
  
          }
        },
        fail(code, msg) {
          uni.showToast({
            icon: "none",
            title: code + "数据获取失败~",
          })
        }
      })
    },

    // 上一步
    backStep() {
      this.isShow = true
    },

    // 登录
    gotoHome() {
      let that = this;
      if (!that.phone) {
        uni.showToast({
          icon: "none",
          title: "手机号不能为空"
        })
        return
      }
      if (!that.password) {
        uni.showToast({
          icon: "none",
          title: "密码不能为空"
        })
        return
      }
      if (that.isColor == false) {
        uni.showToast({
          icon: "none",
          title: "请同意用户协议和隐私政策"
        })
        return
      }
      sun.request({
        url: "/api/ucenter.passport/signIn",
        showLoading: true,
        token: false,
        data: {
          nickname: that.nickname,
          password: that.password,
          mobile: that.phone,
          code: that.code
        },
        success(res) {
          if (res.code == 200) {
            if (res.data.token) {
              uni.setStorageSync("token", res.data.token)
            }
            app.user = res.data.user
            uni.setStorageSync('user', res.data.user)
            uni.switchTab({
              url: "/pages/index/index"
            })
            getApp().getAllPicker()
          } else {
            uni.showToast({
              icon: "none",
              title: res.msg
            })
          }
        },
        fail(code, msg) {
          uni.showToast({
            icon: "none",
            title: code + "数据获取失败~",
          })
        }
      })

    },
    sicpkAgreement() {
      uni.navigateTo({
        url: "../login/userAgreement/userAgreement"
      })
    },
    sicpk() {
      uni.navigateTo({
        url: "../login/intimacy/intimacy"
      })
    },

    // 注册 
    gotoRegister() {
      uni.navigateTo({
        url: "../register/register"
      })
    },

    // 忘记密码
    forgetPwd() {
      uni.navigateTo({
        url: "./forgetPwd/forgetPwd"
      })
    }

  }
}
</script>

<style lang="less">
.page {
  padding: 54upx;
}

.tr {
  text-align: right;
}

.welcome {
  margin-top: 99upx;
  font-size: 48upx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
  margin-bottom: 85upx;
}

.phone {
  width: 100%;
  margin-bottom: 30upx;
  position: relative;

  image {
    width: 28upx;
    height: 28upx;
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
  }

  input {
    padding-left: 14%;
    padding-top: 31upx;
    padding-bottom: 31upx;
    // border-bottom: 1upx solid rgba(192,192,192,1);
    box-shadow: 0upx 1upx 2upx 1upx rgba(224, 224, 224, 0.52);
    border-radius: 49upx;
  }

  .code-btn {
    position: absolute;
    width: 88px;
    height: 28px;
    line-height: 28px;
    right: 5%;
    top: 20%;
    font-size: 24upx;
    background-color: rgba(64, 108, 235, 1);
    color: #fff;
    border-radius: 30px;
  }
}

.register {
  display: flex;
  width: 100%;
  font-size: 24upx;
  color: #97b2ff;
  padding-top: 80upx;

  view {
    flex: 1;
  }
}

.placeholder {
  font-size: 28upx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(212, 212, 212, 1);
}

.footer-btn {
  display: flex;

  .back-step {
    background-color: #fff;
    color: #000;
  }

  button {
    width: 70px;
    height: 30px;
    line-height: 30px;
    font-size: 24upx;
    color: #fff;
    background-color: rgba(64, 108, 235, 1);
  }
}

.btnlogin {
  width: 621upx;
  height: 73upx;
  background: rgba(64, 108, 235, 1);
  border-radius: 37upx;
  line-height: 73upx;
  font-size: 30upx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  margin-top: 69upx;
}

.bottomText {
  width: 100%;
  position: absolute;
  bottom: 24upx;
  left: 0upx;
  color: #333333;
  z-index: 100;
  font-size: 20upx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottomText text:nth-child(1) {
  display: inline-block;
  width: 20upx;
  height: 20upx;
  border-radius: 50%;
  margin-right: 2upx;
}
</style>
